<template>
  <div class="bai">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">积分设置</el-breadcrumb-item>
    </el-breadcrumb>
    <h1>积分赠送设置规则</h1>
    <div class="zengsong">
      <div class="box">
        <el-radio-group v-model="radio1">
          <el-radio label="1" size="large">首次注册登录可获得</el-radio>
          <div class="smallBox">
            <el-input v-model="input" placeholder="10" />
            <el-button type="info">积分</el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="box">
        <el-radio-group v-model="radio2">
          <el-radio label="1" size="large">每笔消费1元即可获得</el-radio>
          <div class="smallBox">
            <el-input v-model="input" placeholder="1" />
            <el-button type="info">积分</el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="box">
        <el-radio-group v-model="radio3">
          <el-radio label="1" size="large">每充值1元即可获得</el-radio>
          <div class="smallBox">
            <el-input v-model="input" placeholder="1" />
            <el-button type="info">积分</el-button>
          </div>
        </el-radio-group>
      </div>
    </div>

    <h1>积分抵扣规则</h1>
    <div class="zengsong">
      <div class="box" style="margin-bottom:39px">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不使用积分抵扣</el-radio>
        </el-radio-group>
      </div>
      <div class="box" style="margin-bottom: 9px">
        <el-radio-group v-model="radio2" >
          <el-radio label="1" size="large">使用积分抵扣</el-radio>
          <div class="smallBox">
            <el-input v-model="input" placeholder="100" />
            <el-button type="info">积分</el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="large">
        <h3>单次消费最多使用</h3>
        <div class="small">
          <el-input v-model="input" placeholder="100" />
          <el-button type="info">积分</el-button>
        </div>
      </div>
    </div>

    <h1>积分过期规则</h1>
    <div class="zengsong">
      <div class="box">
        <el-radio-group v-model="radio1" >
          <el-radio label="1" size="large"
            >积累的所有积分在当年的12月31日过期</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div class="submit">
      <el-button>保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref } from "vue";

const radio1 = ref('0')
const radio2 = ref('0')
const radio3 = ref('0')
const input=ref('')
</script>

<style lang="scss" scoped>
.bai {
  width: 1161px;
  height: 710px;
  background: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  h1 {
    width: 128px;
    height: 26px;
    margin-left: 21px;
    margin-top: 20px;
    margin-bottom: 18px;
    font-family: "Abhaya Libre";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #111111;
  }
}
.el-radio__label{
  height:17px;
}
.el-breadcrumb {
  height: 23px;
  margin-left: 21px;
  margin-top: 17px;
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  /* identical to box height, or 164% */
  color: #999999;
}
.zengsong {
  margin-left: 26px;
}

.el-radio-group ml-4 {
  display: inline-flex;
  align-items: center;
  font-size: 0;
}
.el-radio-group {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  flex-wrap: nowrap;
}
.el-radio.el-radio--large {
    height: 17px;
}
.box {
  margin-bottom: 52px;
  position: relative;
}
.smallBox {
  position: absolute;
  left: 226px;
  display: flex;
}
.el-radio.el-radio--large .el-radio__inner {
  height: 20px;
  width: 20px;
  border-color: #999999;
  margin-right: 21px;
}
.el-radio.el-radio--large .el-radio__label {
  font-family: "Inder";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 17px;
  color: #333333;
}
.el-input__wrapper {
  width: 210px;
  height: 35px;
  box-sizing: border-box;
  .el-input__inner {
    width: 210px;
    height: 35px;
  }
}
.el-button {
  width: 50px;
  height: 35px;
  background: #d9d9d9;
  border: 1px solid #999999;
  border-radius: 0px 3px 3px 0px;
  box-sizing: border-box;
  font-family: "Inder";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 17px;
  /* identical to box height, or 106% */

  color: #333333;
}
.large {
  margin-left: 240px;
  display: flex;
  align-items: center;
  height: 25px;
  h3 {
    font-family: "Inder";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
    color: #555555;
    margin-right: 11px;
  }
  .small {
    display: flex;
    width: 100px;
    .el-input__wrapper {
      width: 55px;
      height: 25px;
      border: 1px solid #999999;
      border-radius: 3px 0px 0px 3px;
      box-sizing: border-box;
      .el-input__inner {
        width: 28px;
        height: 17px;
      }
    }
    .el-button {
      width: 45px;
      height: 25px;
      background: #d9d9d9;
      border: 1px solid #999999;
      border-radius: 0px 3px 3px 0px;
      box-sizing: border-box;
      font-family: "Inder";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 17px;
      color: #555555;
    }
  }
}
.submit {
  .el-button {
    position: absolute;
    width: 130px;
    height: 40px;
    background: #7aa4ff;
    border-radius: 5px;
    box-sizing: border-box;
    top: 607px;
    left: 500px;
    font-family: "Inder";
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    /* identical to box height, or 81% */

    color: #ffffff;
  }
}
</style>
